<template>
  <!-- 选择坞修关键词 -->
  <el-dialog
    v-model="props.modelValue"
    width="800px"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ t('dockRepair.label2') }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>

    <div
      v-if="keywordList.length"
      class="list grid-4 gap-2"
    >
      <div
        :class="['item', 'flexcc', { active: activeList.some((a) => a.id === item.id) }]"
        v-for="item in keywordList"
        :key="item.id"
        @click="handleClick(item)"
      >
        {{ item.repairKeywords }}
      </div>
    </div>

    <el-empty
      v-else
      description=""
      :image="noDataImg"
    ></el-empty>

    <template #footer>
      <div class="dialog-footer flexcc">
        <el-button
          color="#252628"
          plain
          @click="cancel"
        >
          {{ t('cancelText') }}
        </el-button>
        <el-button
          type="primary"
          color="#252628"
          :disabled="!activeList.length"
          @click="confirm"
        >
          {{ t('confirmText') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import useDockRepair from '@/stores/dockRepair'
import { repairKeywordsListApi, addKeywordBath } from '@/service/dockOrder'
import noDataImg from '@/assets/img/icon_wushuju.png'

const store = useDockRepair()

onBeforeMount(() => {
  init()
})

const { t, locale } = useI18n()

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'getData'])

const handleClose = () => {
  emit('update:modelValue')
}

// 取消
const cancel = () => {
  handleClose()
}
// 确定
const confirm = () => {
  const params = activeList.value.map((item) => {
    return {
      projectId: item.id,
      dockOrderId: store.orderInfo.id,
      projectNameCn: item.repairKeywordsCn,
      projectNameEn: item.repairKeywordsEn
    }
  })
  if (!params.length) {
    return
  }
  addKeywordBath(params).then(() => {
    handleClose()
    emit('getData')
  })
}

// 坞修关键词
const keywordList = ref([])
const getKeywordList = () => {
  repairKeywordsListApi({
    dockOrderId: store.orderInfo.id
  }).then(({ data }) => {
    keywordList.value = data
  })
}

//
const activeList = ref([])
const handleClick = (item) => {
  const index = activeList.value.findIndex((a) => a.id === item.id)
  if (index !== -1) {
    activeList.value.splice(index, 1)
  } else {
    activeList.value.push(item)
  }
}

const init = () => {
  getKeywordList()
}
</script>


<style scoped lang="scss">
.list {
  .item {
    border: 1px solid #f5f5f5;
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
    &.active {
      background-color: var(--mainColor);
      border-color: var(--mainColor);
      color: #fff;
    }
  }
}
</style>
